<template>
  <div id="cardItem">
    <div>
      <div class="cardItem" >
        <Card v-for="v in modules" :key="v.index" :domain="v"></Card>
      </div>
    </div>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="getPage"
      :page-size="size"
    ></el-pagination>
  </div>
</template>
<script>
import { getAllPicture } from "@/api/module_picture";
import Card from "@/components/recognizeCard";
import { selectModuleById } from "@/api/module";
export default {
  components: {
    Card,
  },
  data() {
    return {
      
      total: "",
      page: 1,
      size: 6,
      modules: "",
    };
  },
  mounted() {
    selectModuleById(1, this.page, this.size).then((res) => {
      this.modules = res.data.modules;
      this.total = res.data.total;
      this.getAllUrls();
    });
  },
  methods: {
    getPage(page = 1) {
      selectModuleById(1, page, this.size).then((res) => {
        this.modules = res.data.modules;
        this.total = res.data.total;
this.getAllUrls();
        
      });
    },
    getAllUrls() {
      this.$http
        .all([
          this.modules.forEach((value, index) => {
            getAllPicture(value.id).then((res) => {
              if (res.data.modulePictures[0]) {
                value["url"] = res.data.modulePictures[0].modulePicturepath;
              } else {
                value["url"] = "";
              }
              this.$set(this.modules[index], value);
            });
          }),
        ])
        .then(this.$http.spread(() => {}));
    },
  },
};
</script>
<style>
#cardItem {
  position: relative;
  padding: 10px;
  height: 600px;
}
#cardItem > div:first-child {
  margin: 0 auto;
  overflow: hidden;
  width: 936px;
  padding: 20px;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #e06e03;
}
#cardItem .el-pagination {
  position: absolute;
  bottom: 0;
}
</style>